<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>用户信息注册表</title>

    <!-- Bootstrap -->
    <link href="./login/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="./login/dist/js/jquery-1.11.1.min.js"></script>
    <script src="./login/dist/js/bootstrap.min.js"></script>
            <style type="text/css">
                   #ioc{
                    position:absolute;
                    left:240px;
                    top:20px;
                   } 
                  
                    #table{
                         
                          position:absolute;
                          top:0px;
                          
                    }
                    #top{
                        position: relative;
                        top:15px;
                    }
                    #bu{
                        position:absolute;
                        right:110px;
                        top:370px;
                    }
                     #fu{
                        position:absolute;
                        right:110px;
                        top:70px;
                    } 
                    #lu{
                        width:150px;
                        height:250px;
                        position:absolute;
                        left:100px;
                        top:370px;
                        overflow:hidden;
                    }   
                    #au{
                        position:absolute;
                        left:50px;
                        top:20px;
                    }
                  
            </style>
  </head>
  <body >
        
        <div  style='height:630px;background:url("./login/img/ac_footer_bg.jpg")' class="col-md-12">
            
             <img id="au" src="./login/img/logo.png" width="250px" alt="">
       </div>
        <!-- 表单注册的页面 -->
        <div  id="table" style='height:630px;background:#FFF5EE;margin-bottom:20px;' class="col-md-6 col-md-offset-3">
                    
                    <div id="top" class="col-md-12" style="height:100px" id="one">
                    
                    <img  id="ioc" src="./login/img/ico_leaf.png"  width="200px"  alt="">

                    </div>
                     <div  id="from" class="col-md-6 col-md-offset-3 "  ><br><br>
    
                            <form role="form" method="post" action="{{url('/register')}}">
                                      <div class="form-group">
                                            <label for="exampleInputEmail1">用户名:</label>
                                            <input read="请输入用户名" name="username" type="text" class="form-control" id="exampleInputEmail1" placeholder="请输入用户名" style="width:300px" ><span></span>
                                      </div>
                                      <div class="form-group">
                                            <label for="exampleInputPassword1">密码:</label>
                                            <input  read="请输入密码6~18位" type="password" name="password"class="form-control" id="exampleInputPassword1" placeholder="请输入密码"  style="width:300px"><span></span>
                                   </div>
                                      <div class="form-group">
                                            <label for="exampleInputPassword1">确认密码:</label>
                                            <input read="请确认同上密码" type="password" name="Ppassword" class="form-control" id="exampleInputPassword1" placeholder="确认密码" style="width:300px"><span></span>
                                      </div>
                                       <div class="form-group">
                                            <label for="exampleInputPassword1">电话号码:</label>
                                            <input read="请输入正确电话号码"  name="phone"  type="text" class="form-control" id="exampleInputPassword1 phone" placeholder="请输入电话号码" style="width:300px"><span></span>
                                           
                                      </div><br>
									 
                                            <label for="exampleInputPassword1">验证信息:</label>
									  <div class="form-group" style="width:400px">

									
                                            <input  id="yz" type="text"  name="vcode" style="width:100px; float:left;" class="form-control" id="exampleInputPassword1" placeholder="输入验证码" style="width:300px">
                                            <div style="float:left;margin-left:20px">
	                                       <button style="float:left;width:80px" id="yan" type="button" class="btn btn-primary">点击验证
	                                          </button>
                                            </div>	
                                      </div>
                                     {{csrf_field()}}
                                      <button type="submit" class="btn btn-default" style="width:300px;background:#87cefa;margin-top:30px">注册</button>
                            </form>
                      
                     </div>

        </div>
        <div id="lu">
            <img width="500px" src="./login/img/sc_img_welfare.png" width="250px" alt="">
        </div>

        <div>
            <img id='bu' src="./login/img/comment-girl.png" width="120px" alt="">
        </div>
        <div>
            <img id='fu' src="./login/img/ico_plane.png" width="120px" alt="">
        </div>
        <!-- 表单注册结束 -->
        <script type="text/javascript" src="./login/js/jquery-1.8.3.min.js"></script>

        <script type="text/javascript">

        $('form').submit(function(){
		//触发所有的丧失焦点事件
		$('input').trigger('blur');
		//验证所有字段都正确 提交
		if(CUSER && CPASS && CREPASS && CEMAIL && CPHONE){
			//提交
			return true;
		}
		//阻止默认行为
			return false;
		})
	




    $('input').focus(function(){
	//获取当前的提示信息
	var v = $(this).attr('read');
	//给span设置
	$(this).next().html(v).css('color','red');
	$(this).css('border','1px solid red');
	})
   

     		//绑定用户名丧失焦点事件
		$('input[name=username]').blur(function(){
		//获取密码
		var pass = $(this).val();
		var reg = /^\w{6,18}$/;
		if(reg.test(pass)){
			//正确
			$(this).next().html('√').css('color','blue');
			$(this).css('border','1px solid blue');
			CUSER = true;
		}else{
			$(this).next().html('账户格式不正确').css('color','red');
			$(this).css('border','1px solid red');
			CUSER = false;
		}
		})


        //密码验证	
     	$('input[name=password]').blur(function(){
		//获取密码
		var pass = $(this).val();
		var reg = /^\w{6,18}$/;
		if(reg.test(pass)){
			//正确
			$(this).next().html('√').css('color','blue');
			$(this).css('border','1px solid blue');
			CPASS = true;
		}else{
			$(this).next().html('密码格式不正确').css('color','red');
			$(this).css('border','1px solid red');
			CPASS = false;
		}
		})



        //确认密码验证
      	$('input[name=Ppassword]').blur(function(){
		//获取确认密码的值
		var repass = $(this).val();
		//获取密码的值
		var pass = $('input[name=password]').val();
		if(pass == ''){
			$(this).next().html('请先填写密码').css('color','red');
			$(this).css('border','1px solid red');
			CPASS = false;
			return;
		}

		//验证
		if(repass == pass){
			//正确
			$(this).next().html('√').css('color','blue');
			$(this).css('border','1px solid blue');
			CREPASS = true;
		}else{
			$(this).next().html('两次密码不一致').css('color','red');
			$(this).css('border','1px solid red');
			CREPASS = false;
		}
	})



      	//手机验证
        $('input[name=phone]').blur(function(){
		//获取
		var phone = $(this).val();
		//正则
		var reg = /^1\d{10}$/;
		if(reg.test(phone)){
			//正确
			$(this).next().html('√').css('color','blue');
			$(this).css('border','1px solid blue');
			CPHONE = true;
		}else{
			$(this).next().html('手机号码格式不正确').css('color','red');
			$(this).css('border','1px solid red');
			CPHONE = false;
		}

	})


    var l = 0;
    $("#yan").click(function(){

     
		l+=1;	
		
		if(l>1){
			l=60000;
		
		}
		
    //防止恶意点击
   setTimeout(function(){

		$("#yan").html("点击验证");	
      	 var v= $("input[name=phone]").val();	

        	$.get('/send',{phone:v},function(data){


		  })
  
     
      },l);    


       ;
     })
     	



		


        </script>
      
</html>